<template>
  <!-- 基础牌 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="cardDataList" @query="getCardList(true)" @reset="refresh">
        <template v-slot:row>
          <!-- <el-form-item label="游戏类型:" label-width="90px">
            <el-select v-model="listQuery.game_id" placeholder="请选择游戏类型" filterable >
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in GAME_TYPE" :key="index"></el-option>
            </el-select>
          </el-form-item> -->
        </template>
        <template v-slot:actions>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getCardList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" prop="game_id" label="游戏类型" width="150">
            <template slot-scope="scope">
              <span>{{ gameType(scope.row.game_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="a_base_poker_id" label="扑克ID" width="120" />
          <el-table-column align="center" prop="a_poker_type" label="扑克牌花色" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.a_poker_type==1?'':scope.row.a_poker_type==2?'success':scope.row.a_poker_type==3?'danger':'warning'">
                {{ scope.row.a_poker_type==1?'方块':scope.row.a_poker_type==2?'梅花':scope.row.a_poker_type==3?'红桃':'黑桃' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="a_poker_num" label="扑克牌数字" width="150"/>
          <el-table-column align="center" prop="a_poker_shownum" label="扑克牌展示展示数字" width="150"/>
          <el-table-column align="center" prop="a_poker_num" label="扑克牌数字" width="150"/>
          <el-table-column align="center" prop="a_poker_remark" label="备注" />
        </template>
        <template v-slot:footer>
          <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getCardList"/>
        </template>
      </search-table>
    </div>
  </div>
</template>

<script>
import { throttle } from "@/utils/index";
import { 
  getCard,
 } from "@/api/game";
  import {
  GAME_TYPE
} from '@/utils/enum'
import SearchTable from "@/components/SearchTable";

export default {
  name: "card",
  components: {
    SearchTable,
  },
  data () {
    return {
      GAME_TYPE,
      cardDataList: [],
      listLoading: false,
      currentTotal: 0,
      listQuery: {
        page: 1,
        size: 50,
        game_id:0
      },
    };
  },
  created () {
    // this.getCardList()
  },
  activated () {
    this.getCardList()
  },
  methods: {
    // 获取基础牌
    async getCardList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.cardDataList = [];
      that.checkedItem = null;
      that.listLoading = true;
      const response = await getCard(params)
      if (response.code==1) {
        if (response.data.list) {
          that.currentTotal = response.data.total;
          that.cardDataList = response.data.list;
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false;
    },
    // 游戏类型展示
    gameType(cellValue){
      return (this.GAME_TYPE.find((item) => item.value === cellValue)?.label || "公共数据");
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        game_id:1
      };
      this.getCardList();
    }, 2000),
  },
};
</script>

<style lang="scss" scoped></style>
